<template>
	<view class="nav_outer">
		<view class="wrap">
			<view class="u-tabs-box">
				<u-tabs-swiper
					activeColor="#0089ff"
					bar-style
					:bar-width="100"
					ref="tabs"
					:list="list"
					:current="current"
					@change="change"
					:is-scroll="false"
					swiperWidth="750"
				></u-tabs-swiper>
			</view>
			<swiper
				class="swiper-box"
				:current="swiperCurrent"
				@transition="transition"
				@animationfinish="animationfinish"
			>
				<swiper-item class="swiper-item">
					<!-- 未交费 -->
					<scroll-view scroll-y style="height: 100%; width: 100%">
						<view class="page-box">
							<!-- <view class="title_box">
								<view class="title_box_content"
									><view>张三</view>
									<view>【就诊卡号：00466644824】</view>
									<view @click="selectCard"
										>切换就诊卡<u-icon name="arrow-right"></u-icon></view
								>
								</view>
							</view> -->
							<!-- 内容 -->
							<view class="bottom_comtent" v-if="UnpaidFee_show">
								<view>{{ UnpaidFee }}</view>
							</view>
							<view v-else style="margin-top: 50%"
								><u-divider>暂无未缴费单的订单</u-divider></view
							>
						</view>
					</scroll-view>
				</swiper-item>
				<!-- 已缴费 -->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%; width: 100%">
						<view class="page-box">
							<!-- <view class="title_box">
								<view class="title_box_content"
									><view>张三</view>
									<view>【就诊卡号：00466644824】</view>
									<view @click="selectCard"
										>切换就诊卡<u-icon name="arrow-right"></u-icon></view
								>
								</view>
							</view> -->
							<!-- 内容 -->
							<view class="bottom_comtent" v-if="Paid_show">
								<view>{{ Paid }}</view>
							</view>
							<view v-else>
								<u-empty
									text="暂无数据"
									icon-size="200"
									icon-color="#0089ff8c"
									color="#c0c4cc"
									mode="history"
									margin-top="330"
								></u-empty>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<!-- 全部 -->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%; width: 100%">
						<view class="page-box">
							<!-- <view class="title_box">
								<view class="title_box_content"
									><view>张三</view>
									<view>【就诊卡号：00466644824】</view>
									<view @click="selectCard"
										>切换就诊卡<u-icon name="arrow-right"></u-icon></view
								>
								</view>
							</view> -->
							<view class="bottom_comtent" v-if="whole_show">
								<view>{{ whole }}</view>
							</view>
							<view v-else>
								<u-empty
									text="暂无数据"
									icon-size="200"
									icon-color="#0089ff8c"
									color="#c0c4cc"
									mode="history"
									margin-top="330"
								></u-empty>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<view class="safe"></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 未交费
			UnpaidFee: '',
			UnpaidFee_show: false,
			// 已缴费
			Paid: '',
			Paid_show: false,
			// 全部
			whole: '',
			whole_show: false,
			list: [
				{
					id: 0,
					name: '未交费',
				},
				{
					id: 1,
					name: '已缴费',
				},
				{
					id: 2,
					name: '全部',
				},
			],
			current: 0,
			swiperCurrent: 0,
			tabsHeight: 0,
			dx: 0,
		}
	},
	onReady() {
		// 未交费
		if (this.UnpaidFee == '') {
			this.UnpaidFee_show = false
		} else {
			this.UnpaidFee_show = true
		}
		// 已缴费
		if (this.Paid == '') {
			this.Paid_show = false
		} else {
			this.Paid_show = true
		}
		// 全部
		if (this.whole == '') {
			this.whole_show = false
		} else {
			this.whole_show = true
		}
	},
	onLoad() {},

	computed: {},
	methods: {
		// tab栏切换
		change(index) {
			console.log(index, '123')
			this.swiperCurrent = index
		},
		// swiper-item左右移动，通知tabs的滑块跟随移动
		transition({ detail: { dx } }) {
			this.$refs.tabs.setDx(dx)
		},
		// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
		// swiper滑动结束，分别设置tabs和swiper的状态
		animationfinish({ detail: { current } }) {
			// 获取当前切换的是哪一项
			console.log(current)
			this.$refs.tabs.setFinishCurrent(current)
			this.swiperCurrent = current
			this.current = current
		},
		// 切换就诊卡
		selectCard() {
			uni.navigateTo({
				url: './select_pay',
			})
		},
	},
}
</script>


<style lang="scss">
page {
	height: 100%;
}
// .nav_outer {
// 	box-sizing: border-box;
// 	padding-bottom: 68rpx;
// 	padding-bottom: constant(safe-area-inset-bottom);
// 	padding-bottom: env(safe-area-inset-bottom);
// }
.wrap {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--window-top));
	width: 100%;
}
.swiper-box {
	flex: 1;
}
.swiper-item {
	height: 100%;
}
.title_box {
	padding: 30rpx;
	background-color: #f2f2f2;
	.title_box_content {
		display: flex;
		padding: 30rpx;
		background: #fff;
		view:nth-child(2) {
			flex: 1;
			text-align: center;
			color: #9a9a9a;
		}
		view:nth-child(3) {
			color: #0089ff;
		}
	}
}
.bottom_comtent {
	padding: 0 30rpx;
}
.safe {
	height: 0;
	height: constant(safe-area-inset-bottom);
	height: env(safe-area-inset-bottom);
}
</style>
